<template>
    <div>
        <div id="myTiao" style="width:460px;height:300px ;background-color: #fff;" ></div>
    </div>
</template>

<script>

export default {
    name: 'Tiao',
    data() {
        return {
            chart: null,
            options: {},
        }
    },
    mounted() {
        this.initOptions()
        this.initTiao()
    },
    methods: {
        initOptions() {
            this.options = {
                legend: {
                    orient: "horizontal",//水平展示，不写默认水平展示
                    center: 20,
                    bottom: 10,
                    data: ['和平区家宽', '南开区集客','北辰区家宽','静海区集客'],
                    icon: 'square',
                    itemGap: 10

                },
                xAxis: {
                    data: ['2022.02.16',
                        '2022.02.17',
                        '2022.02.18',
                        '2022.02.19',]
                },
                yAxis: {},
                series: [
                    {
                        data: [
                            9400,
                            8400,
                            7400,
                            7000
                        ],
                        type: 'line',
                        smooth: true,
                        name: '和平区家宽',
                        symbol: 'none',
                        color:'#0076DE'
                    },
                    {
                        data: [40, 40, 40, 40],
                        type: 'line',
                        smooth: true,
                        name: '南开区集客',
                        symbol: 'none',
                        color:'#60BFF3'
                    }, {
                        data: [200,200, 230, 230],
                        type: 'line',
                        smooth: true,
                        name: '北辰区家宽',
                        symbol: 'none',
                        color:'#40CB81'
                    }, {
                        data: [],
                        type: 'line',
                        smooth: true,
                        name: '静海区集客',
                        symbol: 'none',
                        color:'#FCE222'
                    }
                ]
            }
        },
        initTiao() {
            this.myTiao = this.$echarts.init(document.getElementById('myTiao'))
            this.myTiao.setOption(this.options);
            // window.onresize = function () {
              
            // };
        }
    }
}


</script>

<style>
#Tiao,
html,
body {
    width: 100%;
}
</style>